import React from 'react'
import PropTypes from 'prop-types'
import { View, Text, StyleSheet, Image } from 'react-native'
import { ScaleT, ScaleS } from 'src/utils/ScreenUtil'
import CustomImage from 'src/components/image/CustomImage'
import CustomButton from 'src/components/button/CustomButton'
export default class UserInfo extends React.PureComponent {
  static propTypes = {
    userInfoData: PropTypes.object,
    userNumberData: PropTypes.object,
    avatorClick: PropTypes.func,
    userNameClick: PropTypes.func,
    setBtnClick: PropTypes.func,
    personBtnClick: PropTypes.func
  }

  render () {
    const { userInfoData, userNumberData, avatorClick, userNameClick, setBtnClick, personBtnClick } = this.props
    return (
      <View style={styles.container}>
        <View style={styles.titleView}>
          <CustomButton style={styles.avatorBtn} onPress={avatorClick}>
            <CustomImage style={styles.avatorImg} source={{ uri: userInfoData.userAvator }}/>
          </CustomButton>
          <CustomButton style={styles.titleCenterView} onPress={userNameClick}>
            <Text style={styles.userName}>{userInfoData.userName}</Text>
            <Text style={styles.postion}>{userInfoData.postion}</Text>
          </CustomButton>
          <CustomButton style={styles.setBtn} onPress={setBtnClick}>
            <CustomImage style={styles.setImg} source={require('@/imgC/company/btn_set.png')}/>
          </CustomButton>
        </View>
        <View style={styles.titleInfo}>
          <CustomButton style={styles.titleInfoItem} params={0} onPress={personBtnClick}>
            <Text style={styles.titleInfoItemVal}>{userNumberData.archive_collection}</Text>
            <Text style={styles.titleInfoItemLabel}>人才收藏</Text>
            <CustomImage style={styles.titleInfoItemImg} source={require('@/imgC/company/icon_number1.png')}/>
          </CustomButton>
          <CustomButton style={styles.titleInfoItem} params={1} onPress={personBtnClick}>
            <Text style={styles.titleInfoItemVal}>{userNumberData.post_exception}</Text>
            <Text style={styles.titleInfoItemLabel}>沟通历史</Text>
            <CustomImage style={styles.titleInfoItemImg} source={require('@/imgC/company/icon_number2.png')}/>
          </CustomButton>
          {/* <CustomButton style={styles.titleInfoItem} params={2} onPress={personBtnClick}>
            <Text style={styles.titleInfoItemVal}>{userNumberData.post}</Text>
            <Text style={styles.titleInfoItemLabel}>等待面试</Text>
            <CustomImage style={styles.titleInfoItemImg} source={require('@/imgC/company/icon_number3.png')}/>
          </CustomButton> */}
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: ScaleS(64)
    // marginBottom: ScaleS(100)
  },
  titleView: {
    flexDirection: 'row',
    alignItems: 'center',
    marginHorizontal: ScaleS(20)
  },
  avatorBtn: {
    width: ScaleS(69),
    height: ScaleS(69)
  },
  avatorImg: {
    flex: 1,
    resizeMode: 'cover',
    borderRadius: ScaleS(34.5)
  },
  setBtn: {
    alignSelf: 'flex-start',
    width: ScaleS(26),
    height: ScaleS(26)
  },
  titleCenterView: {
    flex: 1,
    marginHorizontal: ScaleS(15),
    justifyContent: 'center'
  },
  userName: {
    color: '#000000',
    fontSize: ScaleT(20),
    lineHeight: ScaleS(35),
    fontWeight: '500'
  },
  postion: {
    color: '#444444',
    fontSize: ScaleT(13),
    lineHeight: ScaleS(28),
    fontWeight: '400'
  },
  titleInfo: {
    flexDirection: 'row',
    marginTop: ScaleS(50),
    marginHorizontal: ScaleS(12)
  },
  titleInfoItem: {
    width: ScaleS(110)
  },
  titleInfoItemVal: {
    marginLeft: ScaleS(8),
    color: '#444444',
    fontSize: ScaleT(20),
    lineHeight: ScaleS(24),
    fontWeight: 'bold'
  },
  titleInfoItemLabel: {
    marginLeft: ScaleS(8),
    color: '#333333',
    fontSize: ScaleT(13),
    lineHeight: ScaleS(18),
    fontWeight: '400',
    marginTop: ScaleS(10)
  },
  titleInfoItemImg: {
    width: ScaleS(43),
    height: ScaleS(46),
    marginTop: ScaleS(7.5)
  }
})
